/**
 * Copyright 2023 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import './variables.scss';

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
}

html {
  &.android {
    #root {
      padding-top: var(--padding-top);
    }
  }
}

html,
body {
  height: 100%;
}

html,
button,
input {
  font-family: 'Space Grotesk';
}

.badInput {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

button,
input {
  &:focus {
    outline: none;
  }
}

button {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
}

#root {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

main {
  height: 100%;
  position: relative;
  width: 100vw;
}

mark {
  background: transparent;
  position: relative;
  display: inline-block;
  line-height: inherit;
  padding: 0 4px;

  &::after {
    content: '';
    display: block;
    position: absolute;
    background: $highlight_guess;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
  }

  &.forbidden {
    &::after {
      background: $highlight_forbidden;
    }
  }
}

.line {
  display: block;
  line-height: inherit;
}

.container {
  padding-left: 16px;
  padding-right: 16px;

  @media screen and (min-width: $desktop) {
    padding-left: 0;
    padding-right: 0;
    max-width: 656px;
    margin-left: auto;
    margin-right: auto;
  }

  &.inset {
    padding-top: 0;

    @media screen and (min-width: $desktop) {
      width: 492px;
      padding: 16px 0px 100px;
    }
  }
}

.container--wide {
  @media screen and (min-width: $desktop) {
    width: 721px;
  }
}

.emoji {
  font-family: 'Noto Color Emoji';
}

.wordByWord {
  span {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    line-height: inherit;

    &.active {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}